<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../../resources/styles.css">
    <link rel="icon" type="image/x-icon" href="../../../resources/favicon.ico">
    <title>Tools Component</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .full-screen {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
      }
    </style>
</head>
<body>
<div class="full-screen" id="container"></div>
<script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.1/build/three.module.js",
        "stats.js/src/Stats.js": "https://unpkg.com/stats-js@1.0.1/src/Stats.js",
        "three/examples/jsm/libs/lil-gui.module.min": "https://unpkg.com/three@0.160.1/examples/jsm/libs/lil-gui.module.min.js",
        "openbim-components": "../../../resources/openbim-components.js"
      }
    }

</script>
<script type="module">

    // Set up scene (see SimpleScene tutorial)

    import * as THREE from 'three';
    import * as OBC from 'openbim-components';
    import Stats from 'stats.js/src/Stats.js';
    import * as dat from 'three/examples/jsm/libs/lil-gui.module.min';

    const container = document.getElementById('container');

    const components = new OBC.Components();

    components.scene = new OBC.SimpleScene(components);
    const renderer = new OBC.SimpleRenderer(components, container);
    components.renderer = renderer;
    components.camera = new OBC.SimpleCamera(components);
    components.raycaster = new OBC.SimpleRaycaster(components);

    components.init();

    const scene = components.scene.get();

    components.camera.controls.setLookAt(10, 10, 10, 0, 0, 0);

    const directionalLight = new THREE.DirectionalLight();
    directionalLight.position.set(5, 10, 3);
    directionalLight.intensity = 0.5;
    scene.add(directionalLight);

    const ambientLight = new THREE.AmbientLight();
    ambientLight.intensity = 0.5;
    scene.add(ambientLight);

    const grid = new OBC.SimpleGrid(components);

    const drawer = new OBC.Drawer(components);
    components.ui.add(drawer);

    const optionsDrawer = new OBC.Drawer(components);
    optionsDrawer.size = "15rem";
    components.ui.add(optionsDrawer);
    optionsDrawer.visible = true;
    optionsDrawer.alignment = "right";

    const visibleCheckbox = new OBC.CheckboxInput(components);
    optionsDrawer.addChild(visibleCheckbox);
    visibleCheckbox.label = "Visible";
    visibleCheckbox.value = true;
    visibleCheckbox.onChange.add(value => {
       drawer.visible = value;
    });

    const sizeRange = new OBC.RangeInput(components);
    optionsDrawer.addChild(sizeRange);
    sizeRange.label = "Size";
    sizeRange.min = 1;
    sizeRange.max = 20;
    sizeRange.value = 10;
    sizeRange.onChange.add((value) => {
        drawer.size = `${value}rem`;
    });

    const alignmentDropdown = new OBC.Dropdown(components);
    optionsDrawer.addChild(alignmentDropdown);
    alignmentDropdown.label = "Alignment";
    alignmentDropdown.addOption("top", "bottom", "left", "right");
    alignmentDropdown.value = "left";
    alignmentDropdown.onChange.add((value) => {
        drawer.alignment = value;
    });

</script>
</body>
</html>
